<template>
    <el-container style="width: 100%; height: 100%;">

        <!-- 菜单 开始 -->
        <el-aside width="atuo">
            <Aside :isCollapse="isCollapse"
                :defaultPage="defaultPage"
                :menuTreeData="menuTreeData"/>
        </el-aside>
        <!-- 菜单 结束 -->

        <el-container>

            <!-- 顶栏 开始 -->
            <el-header style="height: 80px; padding: 0;">
                <Header :isCollapse="isCollapse"
                    @changeCollapse="changeCollapse"/>
            </el-header>
            <!-- 顶栏 结束 -->

            <!-- 内容 开始 -->
            <el-main style="background-color: #ddd;">
                <div>
                    Content
                </div>
            </el-main>
            <!-- 内容 结束 -->

        </el-container>
    </el-container>
</template>

<script>

import Aside from '@/components/home/Aside.vue'
import Header from '@/components/home/Header.vue'

export default {
    name: 'Home',
    components: {
        Aside,
        Header
    },
    data() {
        return {
            isCollapse: true,
            defaultPage: 'home',
            // 菜单树数据
            menuTreeData: [
                {
                    name: '首页',
                    code: 'home',
                },
                {
                    name: '系统管理',
                    code: 'systemManage',
                    children: [
                        {
                            name: '用户管理',
                            code: 'userManage'
                        }
                    ]
                },
                {
                    name: '订单管理',
                    code: 'orderManage',
                }
            ],

        }
    },
    methods: {
        changeCollapse() {
            this.isCollapse = !this.isCollapse;
        },
    }
}
</script>
